<template>
    <div class="special">
        <div class="container">
            <div class="head">
                <h3>最新专题 <span></span></h3>
                <a href="javascript:;">查看全部&gt;</a>
            </div>
            <div class="special_list">
                <div class="l" v-for="item,index in specialList" :class="{hover:index == tabIndex}" @mouseover="tabIndex = index" @mouseout="tabIndex = -1">
                    <a href="javascript:;">
                        <img :src="item.detailsUrl" alt="">
                        <div class="meta">
                            <p class="title">
                                <span>{{item.title}}</span>
                                <span>{{item.summary}}</span>
                            </p>
                            <p class="price">￥{{item.lowestPrice}}起</p>
                        </div>
                    </a>
                    <div class="foot">
                        <span>{{item.viewNum}}</span>
                        <span>{{item.replyNum}}</span>
                        <span>{{item.collectNum}}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            specialList: [],
            tabIndex:-1
        }
    },
    mounted() {
        this.axios.get('https://apipc-xiaotuxian-front.itheima.net/home/special').then((res) => {
            if (res.data.msg == '操作成功') {
                this.specialList = res.data.result
            }
        })
    },
}
</script>

<style lang="scss" scoped>
.head {
    padding: 40px 0;
    display: flex;
    align-items: flex-end;

    h3 {
        flex: 1;
        font-size: 32px;
        font-weight: 400;
        margin-left: 6px;
        height: 35px;
        line-height: 35px;

        span {
            font-size: 16px;
            color: #999;
            margin-left: 20px;
        }
    }
}

.special_list {
    height: 380px;
    padding-bottom: 20px;
    display: flex;
    justify-content: space-between;

    .hover{
        transform: translate3d(0,-3px,0);
    box-shadow: 0 3px 8px rgb(0 0 0 / 20%);
    }
    .l {
        width: 404px;
        background: #fff;
        transition: all .5s;

        a {
            display: block;
            width: 100%;
            height: 288px;
            position: relative;

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

            .meta {
                background-image: linear-gradient(0deg, rgba(0, 0, 0, .8), transparent 50%);
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 288px;

                .title {
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    padding-left: 16px;
                    width: 70%;
                    height: 70px;

                    span {
                        text-overflow: ellipsis;
                        overflow: hidden;
                        white-space: nowrap;

                        &:nth-of-type(1) {
                            color: #fff;
                            font-size: 22px;
                            display: block;
                        }

                        &:nth-of-type(2) {
                            display: block;
                            font-size: 19px;
                            color: #999;
                        }
                    }
                }

                .price {
                    position: absolute;
                    bottom: 25px;
                    right: 16px;
                    line-height: 1;
                    padding: 4px 8px 4px 7px;
                    color: #cf4444;
                    font-size: 17px;
                    background-color: #fff;
                    border-radius: 2px;
                }
            }
        }

        .foot {
            height: 72px;
            line-height: 72px;
            padding: 0 20px;
            font-size: 16px;

            span {
                vertical-align: middle;

                &:nth-of-type(1) {
                    float: left;
                    margin-right: 25px;
                }

                &:nth-of-type(3) {
                    float: right;
                }
            }
        }
    }
}
</style>